<template>
	<view style="background-color: #fafafa;">
		<view class="example-body">
			<uni-card :isShadow="true" title="刘聪" subTitle="业主" mode="title" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="合同号:1001010" note="true" @click="clickCard">
				<view>
					<view class="image-box">
						<image class="image" mode="aspectFill" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" />
					</view>
					<view class="content-box">
						<text class="content-box-text">标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现</text>
					</view>
				</view>
				<template slot="footer">
					<view class="footer-box">
						<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
						<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
						<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
					</view>
				</template>
			</uni-card>
		</view>
	</view>
	
</template>
<script>
	

	
	var  graceChecker = require("../../common/graceChecker.js")

	export default {
		data() {
			return {
			}
		},
		onLoad:function(){
			debugger;
			this.formSubmit("");
		},
		methods: {
			formSubmit: function(e) {
				debugger;
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
                    {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                    {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    uni.showToast({title:"验证通过!", icon:"none"});
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style>
	
	button {
	    margin-top: 30rpx;
	    margin-bottom: 30rpx;
	}
	.button-sp-area {
	    margin: 0 auto;
	    width: 60%;
	}
	.uni-input {
		margin: 0 50rpx;
		background-color: #FFFFFF;
		height: 3rem;

	}

	.uni-form-item .title {
		padding: 20rpx 0;
		padding-left: 20rpx;
	}
</style>
